window.onload = () => { 
    let container = document.querySelector('.container')
    let restar = document.querySelector('.restar')
    let userplay = document.querySelectorAll('.chonse>div')
    let result = document.querySelector('.result')
    let resultText = document.querySelector('.result>.anser')
    let computerchoose = document.querySelector('.result>div')
    let usermarks = document.querySelector('.usermarks')
    let computermarks = document.querySelector('.computermarks')
    let img1 = document.getElementById('img1')
    let img2 = document.getElementById('img2')
    let img3 = document.getElementById('img3')
    let model = document.getElementById('model')
    let marks = {
        user: 0,
        computer:0
    }
    restar.onclick = () => { 
        marks.user = 0
        marks.computer = 0
        usermarks.innerHTML = marks.user
        computermarks.innerHTML = marks.computer
    }
    for (let i = 0; i < userplay.length; i++) { 
        userplay[i].onclick = (e) => { 
            restar.style.display = 'flex'
            container.style.background = 'rgba(0, 0, 0, .3)'
            let userchoose = e.target.id
            let computerchoose = getcomputerchoose()
            console.log(userchoose, computerchoose)
            let winer = getwiner(userchoose, computerchoose)
            showPage(userchoose,computerchoose,winer)
        }
    }
    function showPage(u, c, a) {
        model.style.display = 'block'
        result.style.display = 'block'
        let computerclass = getcomputerclass(c)
        console.log(computerclass)
        if (a === 'userWin') {
            resultText.innerHTML = '恭喜你，你赢了'
            resultText.style.color = '#2ecc71'
            marks.user ++
            usermarks.innerHTML = marks.user
            if (computerclass === 'fa fa-hand-grab-o') {
                img1.style.display = 'flex'
            } else if (computerclass === 'fa fa-hand-scissors-o') {
                img2.style.display = 'flex'
            } else { 
                img3.style.display = 'flex'
            }
        } else if (a === 'computerWin') {
            marks.computer ++
            computermarks.innerHTML = marks.computer
            resultText.innerHTML = '抱歉，您输了'
            resultText.style.color = 'red'
            if (computerclass === 'fa fa-hand-grab-o') {
                img1.style.display = 'flex'
            } else if (computerclass === 'fa fa-hand-scissors-o') {
                img2.style.display = 'flex'
            } else { 
                img3.style.display = 'flex'
            }
        } else { 
            resultText.innerHTML = '双方平局'
            resultText.style.color = 'rgb(45, 45, 46)'
            if (computerclass === 'fa fa-hand-grab-o') {
                img1.style.display = 'flex'
            } else if (computerclass === 'fa fa-hand-scissors-o') {
                img2.style.display = 'flex'
            } else { 
                img3.style.display = 'flex'
            }
        }
    }
    function getcomputerclass(c) { 
        if (c === 'grab') {
            return 'fa fa-hand-grab-o'
        } else if (c === 'scissors') {
            return 'fa fa-hand-scissors-o'
        } else { 
            return 'fa fa-hand-paper-o'
        }
    }
    function getcomputerchoose() { 
        const num = Math.random()
        if (num <= 0.33) {
            return 'grab'
        } else if (num <= 0.67) {
            return 'scissors'
        } else { 
            return 'paper'
        }
    }
    function getwiner(u,c) { 
        if (u === c) {
            return 'same'
        } else if (u === 'grab') {
            if (c === 'scissors') {
                return 'userWin'
            } else { 
                return 'computerWin'
            }
        } else if (u === 'scissors') {
            if (c === 'grab') {
                return 'computerWin'
            } else if(c === 'paper') { 
                return 'userWin'
            }
        } else if (u === 'paper') { 
            if (c === 'grab') {
                return 'userWin'
            } else { 
                return 'computerWin'
            }
        }
    }
    window.onclick = (e) => { 
        if (e.target.id === 'model') { 
            model.style.display = 'none'
            img1.style.display = 'none'
            img2.style.display = 'none'
            img3.style.display = 'none'
            container.style.background = '#fff'
        }
    }
}